<template>
  <div class="message">
    <layout>
      <template #left>
        <div class="message_right">
          <div v-if="!chatStore.sessionChatList.length" class="empty shallow">
            <span>空空如也...</span>
          </div>
          <div v-else class="message_list">
            <sessionItem
              :data="chatStore.sessionChatList"
              @session-click="sessionClick"
            ></sessionItem>
          </div>
        </div>
      </template>
      <template #right>
        <router-view></router-view>
      </template>
    </layout>
  </div>
</template>

<script setup lang="ts">
// import { ref } from 'vue'

import layout from '@renderer/components/layout.vue'
import sessionItem from './c-cnps/session-item.vue'
import useChat from '@renderer/pinai/modules/chat'
import { useRouter } from 'vue-router'

const chatStore = useChat()
const router = useRouter()

// 点击会话列表
const sessionClick = (item) => {
  chatStore.clearNoReadNum(item.id)
  chatStore.setCurrentSessionId(item.id)
  // 获得路由所需的参数
  const params = {
    id: '',
    type: '',
    avatar: '',
    group_user_id: '',
    friend_id: 0,
    name: '',
    g_name: ''
  }
  if (item.chat_type === 'user') {
    params.type = 'user'
    params.id = item.id
    params.avatar = item.avatar
    params.name = item.name
    params.friend_id = item.friend_id
  } else {
    params.type = 'group'
    params.id = item.id
    params.avatar = item.avatar
    params.g_name = item.name
    params.friend_id = item.friend_id
  }
  console.log(params, 'params')
  router.push({
    path: '/chat',
    query: params
  })
}
</script>

<style lang="scss" scoped>
.empty {
  margin-top: 15px;
  text-align: center;
}
.message_list {
  width: 100%;
}
</style>
